<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 400px;
            background-color: #000;
            margin: 10px auto;
            line-height: 100px;
            text-align: center;
            color: #fff;

        }

        input {
            display: inline-block;
            width: 40px;
            line-height: 20px;
            color: #000;
            border: 2px solid #ccc;
            margin-right: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" maxlength="2" readonly="readonly"><span>点</span>
        <input type="text" maxlength="2" readonly="readonly"><span>分</span>
        <input type="text" maxlength="2" readonly="readonly"><span>秒</span>
    </div>
</body>
<script>
    window.onload = function () {
        var oInput = document.getElementsByTagName("input");
        /*time函数功能，获取当前时间和时间存储，故，需要将new Date()放在函数里面*/
        setInterval(time, 1000);
        time();
        function time() {
            var myDate = new Date();
            oInput[0].value = myDate.getHours();  //获得小时函数
            oInput[1].value = myDate.getMinutes(); //获得小时函数
            myDate.getSeconds() < 10 ? (oInput[2].value = "0" + myDate.getSeconds()) : oInput[2].value = myDate.getSeconds();
        }
    }



</script>

</html>